.outer{
    height:500px;
    width: 400px;
    margin:100px auto;
    background-color: rgb(231, 249, 255);
    display: flex;
    flex-direction: column;
    justify-content:space-around;
   }
.button{
    height:30px;
    width:360px;
    text-align: center;
   
}
.inbutton{
    height:35px;
    width:360px;
    text-align: center;
    margin: 10px 20px;

}
.bian{
    margin:5px 8px;
}
.photo1{
    height: 25px;
    width: 25px;
}
.photo2{
    height: 30px;
    width: 30px;
    margin-top: 15px;
}
.photo3{
  
    width:30px;
    height:30px;
}
.down{
    height: 70px;
    background-color: rgb(207, 205, 205);
    display: flex;
    justify-content: space-around;
    grid-gap:5px;
}
.fangshi{
    display: grid;
    grid-template-columns: 40% 20% 20% 20%;
    grid-gap:5px;
}




.top{
    height:70px;
    width: 100%;
   display: flex;
   justify-content: space-around; 
   background-color: white;       
}
.part1{
    width: 500px;
    display: flex;
    justify-content: space-around;  
}
.part2{
    margin-top:20px ;
    width: 600px;
    display: flex;
    justify-content: space-around;  
}
.part3{
    margin-top:10px ;
    width: 200px;
    display: flex;
    justify-content: space-around;  
}
.photo4{
    width:80px;
    height:50px;
    margin-top: 10px;

}
.sou{
    display: inline-block;
    width:500px;
    height: 30px;
    border-color: rgb(181, 181, 189);
    border-radius: 17px;
    color: rgb(90, 89, 89);
    background-color: rgb(231, 227, 227);
}
.button2{
    background-color: rgb(12, 141, 247);
    color: white;
    width:70px;
    height: 40px;
    border-radius: 20px;
}
.photo5{
   margin-top: 10px;
    width:30px;
    height:30px;
}
.back{
    width:65%;
    background-color:  whitesmoke;;
    height:1000px;
    margin-top: 25px;
    margin-left: auto;
    margin-right: auto;
}
.left{
    width:60%;
    height: 1000px;
    float: left;
    background-color: white;
}
.right1{
    width:30%;
    height:240px; 
    background-color: white;
    float:right;
}
.right2{
    width:30%;
    height:250px; 
    background-color: white;
    float:right;
    margin-top: 20px;
    
    
}
.photo6{
    width: 30px;
    height: 30px;
}
.photo7{
    width:40px;
    height: 40px;
}
.r2{
    margin-top: 30px;
    display: flex;
    justify-content: space-between;
    margin-left: 50px;
   
}
.r3{
    width:100%;
    height:30px;
}
.button3{
    width:85%;
    height:40px;
    margin-left: 25px;
    border-color: rgb(109, 172, 245);
    background-color: white;
    color: rgb(109, 172, 245);
}
.photo8{
    width: 50px;
    height: 50px;
}
.r4{
    margin-top: 20px;
    height:200px;
    margin-left: 50px;
    margin-top: 15px;
    display: grid;
    grid-template-columns: 33.3% 33.3% 33.3%;
    grid-template-rows: 50% 50%;
}



.zhuye ul li {
    height: 0;
    transition: 0.3s;
    transform: translateY(-40px);
    opacity: 0;
}

.zhuye:hover li {
    height: 40px;
    width: 85px;
    opacity: 1;
    transform: translateY(0);
}
ul{ 
    background-color: white;
    color: rgb(101, 102, 102);
    /*list-style: none;决定前面有没有点点*/
}
li:hover{
    background-color: rgb(206, 206, 209);
}
/*悬浮*/
.live:hover{
    color: yellow;
}
.shu:hover{
    color: rgb(24, 214, 119);
}
.yuan:hover{
    color: rgb(144, 35, 177);
}
.lan:hover{
    color: #2267e9e1;
}